<template>
	<view class="container">
		<!-- #ifndef APP-PLUS -->
		<view class="header">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view class="scroll-view-item_H" :class="current===0?'fontSize':''" @click="headerNav(0)">武汉</view>
				<view class="scroll-view-item_H" :class="current===1?'fontSize':''" @click="headerNav(1)">经验</view>
				<view class="scroll-view-item_H" :class="current===2?'fontSize':''" @click="headerNav(2)">关注</view>
				<view class="scroll-view-item_H" :class="current===3?'fontSize':''" @click="headerNav(3)">商城</view>
				<view class="scroll-view-item_H" :class="current===4?'fontSize':''" @click="headerNav(4)">推荐</view>
			</scroll-view>
			<view class="headerRight" @click="goSearch">
				<uni-icons type="search" color="white" size="20"></uni-icons>
			</view>
		</view>
		<!-- #endif -->

		<view class="content">
			<swiper class="swiper" @change="swiperChange" :current="current">
				<swiper-item>
					<swiper :vertical="true" class="swiper" @change="changeVertical">
						<swiper-item class="swiperItem" v-for="item in videoList">
							<video :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src"></video>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>
					<swiper :vertical="true" class="swiper" @change="changeVertical">
						<swiper-item class="swiperItem" v-for="item in videoList">
							<video :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src"></video>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>
					<swiper :vertical="true" class="swiper" @change="changeVertical">
						<swiper-item class="swiperItem" v-for="item in videoList">
							<video :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src"></video>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>
					<swiper :vertical="true" class="swiper" @change="changeVertical">
						<swiper-item class="swiperItem" v-for="item in videoList">
							<video :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src"></video>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>
					<swiper :vertical="true" class="swiper" 
						@change="changeVertical('tuijian',$event)" current-item-id="tuijian">
						<swiper-item class="swiperItem" v-for="(item,index) in videoList" :current="index" :current-item-id="item.id">
							<video :loop="videoIndex==index" :id="item.id" loop preload :controls="false"
									:muted="true" :show-fullscreen-btn="false" :show-progress="false"
									:show-play-btn="false" :show-center-play-btn="false"
									:enable-progress-gesture="false" :mobilenet-hint-type="0" class="video" :src="item.src" @play="videoPlay" @pause="videoPause" @click="touchVideo"></video>
						</swiper-item>
					</swiper>
				</swiper-item>

			</swiper>
		</view>
		<!-- #ifndef APP-PLUS -->
		<listOpreator :isShowList="isShowList" />
		<!-- #endif -->
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		reactive,
		onMounted,
	} from "vue";
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import listOpreator from '../../components/ListOpreator.vue'
	components: {
		listOpreator
	}
	let videoContext=ref < object > (null)
	let videoIndex=ref(0)
	let isShowList = ref < boolean > (true)
	let current = ref < number > (4)
	let isVideoPlay=ref<boolean>(true)
	
	onMounted(() => {
		videoContext.value=uni.createVideoContext('tuijian1',this)
		console.log(videoContext.value)
		videoContext.value.play()
	})
	
	onLoad(()=>{
		//#ifdef APP_PLUS
		const subNvue=uni.getSubNVueById('subIndex');
		console.log(subNvue)
		subNvue.show()
		//#endif
	})
	
	onShow(()=>{
		console.log('setup中的onShow');
	})
	
	const swiperChange = (c1: object) => {
		current.value = c1.detail.current
	}
	const videoPause=()=>{
		console.log('pause')
		isVideoPlay.value=false
	}
	const videoPlay=()=>{
		console.log('play')
		 isVideoPlay.value=true
	}
	const goSearch: Function = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	const touchVideo=()=>{
		console.log('touch')
		if(isVideoPlay.value){
			videoContext.value.pause()
			isVideoPlay.value=false
		}else{
			videoContext.value.play()
			isVideoPlay.value=true
		}
	}
	const changeVertical: Function = (type:string,e) => {
		videoIndex.value=Number(e.detail.current)
		console.log(videoIndex.value)
		isShowList.value = false
		let id:number=Number(e.detail.current)+1
		if(videoContext.value!=null){
			videoContext.value.pause()
		}
		videoContext.value=uni.createVideoContext(type+id,this)
		console.log(videoContext.value)
		videoContext.value.play()
		setTimeout(() => {
			isShowList.value = true
		}, 300)
	}

	const headerNav = (number: number) => {
		current.value = number
	}
	
	type videoListType = {
		src: string,
		id: string
	}
	const videoList: videoListType[] = reactive([{
			id: 'tuijian1',
			src: 'https://static.sumer.work/video/sumer-app/df057044ac4016528.mp4'
		},
		{
			id: 'tuijian2',
			src: 'https://static.sumer.work/video/sumer-app/4c00bd85f31c9.mp4'
		},
		{
			id: 'tuijian3',
			src: 'http://www-ctgaba-com.oss-cn-shenzhen.aliyuncs.com/uploads/viedo/20211111/真正九蒸九晒的标准改.mp4'
		},
		{
			id: 'tuijian4',
			src: 'https://static.sumer.work/video/sumer-app/df057044ac4016528.mp4'
		},
		{
			id: 'tuijian5',
			src: 'https://static.sumer.work/video/sumer-app/df057044ac4016528.mp4'
		},
		{
			id: 'tuijian6',
			src: 'https://static.sumer.work/video/sumer-app/df057044ac4016528.mp4'
		}
	])
</script>

<style scoped lang="scss">
	.container {
		width: 750rpx;
		height: 100vh;
		background-color: black;
	}

	.header {
		font-size: 30rpx;
		line-height: 100rpx;
		color: white;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		// background-color: red;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 10000;

		.scroll-view_H {
			white-space: nowrap;
			width: 70%;
			margin: 0 auto;
			text-align: center;
		}

		.scroll-view-item_H {
			display: inline-block;
			width: 25%;
			text-align: center;
		}

		.headerLeft,
		.headerRight {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			
			width:100rpx;
			height:100rpx;
			line-height: 100rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100rpx;
		background-color: red;

	}

	.content {
		width: 100%;
		height: 100%;
		// background-color: #1B2631 ;

		ul {
			border: 0px;
			width: 100%;
			height: 300%;
			list-style-type: none;
			padding: 0px;

			li {
				width: 100%;
				height: 100%;
				background-color: red;
			}
		}
	}

	.swiper {
		padding: 0px;
		border: 0px;
		width: 100%;
		height: 100%;
		overflow-y: hidden;
		position: absolute;
	}

	.swiperItem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		overflow-y: hidden;

		.video {
			width: 100%;
			height: 100%;
		}
	}

	.fontSize {
		font-weight: 1000;
	}
</style>
